<app-toast [message]="toast.message"></app-toast>
<app-front-menu></app-front-menu>
<div class="cover"></div>
<div class="container vertical-horizontal-center">
  <div class="forget-password-page">
    <div class="forget-password-header"></div>
    <div class="forget-password-form">
      <form [formGroup]="forgetPasswordForm" (ngSubmit)="forgetPassword()" *ngIf="step === 'valid'">
        <div class="form-group text-left">
          <label class="radio-inline radio-group">
            <input class="normal" id="forget-password-sms" type="radio" value="sms" [checked]="resetType == 'sms'"  (click)="onChangeRestType('sms')">
            <label for="forget-password-sms">
              <span>通过手机号</span>
            </label>
          </label>
          <label class="radio-inline radio-group">
            <input class="normal" id="forget-password-email" type="radio" value="email" [checked]="resetType == 'email'" (click)="onChangeRestType('email')">
            <label for="forget-password-email">
              <span>通过邮箱</span>
            </label>
          </label>
        </div>
        <div class="input-group" [ngClass]="setClassMobile()" *ngIf="resetType === 'sms'">
          <input class="form-control" type="text" name="mobile" formControlName="mobile" placeholder="请输入您的手机号码" autocomplete="off">
          <div class="form-error-message" *ngIf="mobile.errors?.required && mobile.dirty">请输入您的手机号码</div>
          <div class="form-error-message" *ngIf="mobile.errors?.pattern && mobile.dirty">请输入正确的手机号，且不可使用虚拟手机号码</div>
        </div>
        <div class="input-group" [ngClass]="setClassEmail()" *ngIf="resetType === 'email'">
          <input class="form-control" type="text" name="email" formControlName="email" placeholder="请输入您的邮箱地址" autocomplete="off">
          <div class="form-error-message" *ngIf="email.errors?.required && email.dirty">请输入邮箱地址</div>
          <div class="form-error-message" *ngIf="email.errors?.pattern && email.dirty">请输入正确的邮箱地址，如 example@163.com</div>
        </div>
        <div class="input-group">
          <button *ngIf="resetType === 'sms'" class="btn btn-lg btn-primary col-xs-12" type="submit" [disabled]="!mobile.valid">获取验证码</button>
          <button *ngIf="resetType === 'email'" class="btn btn-lg btn-primary col-xs-12" type="submit" [disabled]="!email.valid">获取验证码</button>
        </div>
      </form>
      <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()" *ngIf="step === 'reset'">
        <div class="codeSend">
          <p>验证码已通过手机短信发送给您</p>
          <p>
            <span>没有收到？</span>
            <a *ngIf="countdownSecond === 0" (click)="forgetPassword()" class="action-link">重新发送</a>
            <a *ngIf="countdownSecond > 0" class="countdown action-link">({{countdownSecond}}秒后) 重新发送</a>
            <span>或</span>
            <a (click)="backToValid()" class="action-link">选择其他方式</a>
          </p>
        </div>
        <div class="input-group" [ngClass]="setClassVerifyCode()">
          <input class="form-control" type="text" name="verifyCode" formControlName="verifyCode" placeholder="请输入验证码" autocomplete="off">
          <div class="form-error-message" *ngIf="verifyCode.errors?.required && verifyCode.dirty">请输入验证码</div>
        </div>
        <div class="input-group" [ngClass]="setClassNewPassword()">
          <input class="form-control" type="password" name="newPassword" formControlName="newPassword" placeholder="设置 8 - 20 位的新密码" autocomplete="off">
          <div class="form-error-message" *ngIf="newPassword.errors?.required && newPassword.dirty">请设置新密码</div>
          <div class="form-error-message" *ngIf="(newPassword.errors?.minlength || newPassword.errors?.maxlength) && newPassword.dirty">密码支持 8 - 20位的字母、数字和英文符号</div>
        </div>
        <div class="input-group" [ngClass]="setClassRepeatPassword()">
          <input class="form-control" type="password" name="repeatPassword" formControlName="repeatPassword" placeholder="确认新密码" autocomplete="off">
          <div class="form-error-message" *ngIf="repeatPassword.errors?.required && repeatPassword.dirty">请确认新密码</div>
          <div class="form-error-message" *ngIf="newPassword.value !== repeatPassword.value && repeatPassword.dirty">两次输入的密码不一致</div>
        </div>
        <div class="input-group">
          <button class="btn btn-lg btn-primary col-xs-12" type="submit" [disabled]="!verifyCode.valid || !newPassword.valid || !repeatPassword.valid || newPassword.value !== repeatPassword.value">重置密码</button>
        </div>
      </form>
      <div class="input-group">
        <span class="float-let">无法通过以上方式找回密码 ？请</span>
        <a routerLink="/contact" class="action-link float-let">联系客服</a>
        <a *ngIf="step === 'valid'" routerLink="/login" class="action-link float-right">立即登录</a>
        <a *ngIf="step === 'reset'" class="action-link float-right" (click)="backToValid()">返回</a>
      </div>
    </div>
  </div>
</div>
